<template>
  <div>
    <h2>历史记录</h2>
    <div>
      <ul>
        <li
          v-for="(item, index) in address"
          :key="index"
        >
          <label>
            <input type="checkbox" @change="select(item)" />
            <div>
              <h3>{{ item.name }}</h3>
              <p>{{ item.phone }}</p>
              <p>{{ item.location.address }}  {{ item.address }}</p>
            </div>
          </label>
          <router-link :to="`/edit/address?id=${item.id}`">
            <icon name="aa" />
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'HistoryAddress',
  computed: {
    ...mapState('user', ['address'])
  },
  methods: {
    select (item) {
      this.$store.commit('user/SET_LOCATION', item.location)
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
